<template>
  <div class="my-container">
    <div class="header">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>任务管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="form">
      <el-form :inline="true">
        <el-form-item>
          <el-button type="primary" round @click="edit(true)">添加</el-button>
        </el-form-item>
        <el-form-item label="编码">
          <el-input v-model="page.cond.code" placeholder="按编码查询" clearable></el-input>
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="page.cond.name" placeholder="按名称查询" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="list(true)">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="content">
      <el-table
        :data="result.records"
        border
        empty-text="暂无数据"
        height="100%">
        <el-table-column type="index" align="center"></el-table-column>
        <el-table-column prop="execName" label="服务" min-width="250"></el-table-column>
        <el-table-column prop="code" label="编码" min-width="250"></el-table-column>
        <el-table-column prop="name" label="名称" min-width="250"></el-table-column>
        <el-table-column prop="cron" label="cron" min-width="250"></el-table-column>
        <el-table-column prop="status" label="状态" min-width="250">
          <template #default="scope">
            <el-tag type="warning" v-if="scope.row.status==='STOPPED'">停止</el-tag>
            <el-tag type="success" v-if="scope.row.status==='RUNNING'">运行</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="person" label="负责人" min-width="250"></el-table-column>
        <el-table-column prop="jobDesc" label="说明" min-width="250"></el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="250">
          <template #default="scope">
            <el-button @click="edit(null, scope.row)" type="text" link size="small">编辑</el-button>
            <el-button @click="remove(scope.row)" type="text" link size="small">删除</el-button>
            <el-button @click="operate('start', scope.row)" type="text" link size="small">启动</el-button>
            <el-button @click="operate('stop', scope.row)" type="text" link size="small">停止</el-button>
            <el-button @click="operate('runOnce', scope.row)" type="text" link size="small">执行一次</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="footer">
      <el-pagination
        background
        layout="prev, pager, next"
        @current-change="changePage"
        :page-size="result.size"
        :total="result.total">
      </el-pagination>
    </div>
    <!-- 模态框 -->
    <el-dialog
      title="编辑"
      ref="form-dialog"
      v-model="visible.edit"
      :close-on-click-modal="false"
      width="600px">
      <div>
        <el-form ref="form" :model="info" label-width="80px" :rules="rules">
          <el-form-item label="服务" prop="execId">
            <el-select v-model="info.execId" placeholder="请选择服务" style="width: 100%;">
              <el-option
                v-for="item in executors"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="编码" prop="code">
            <el-input v-model="info.code" placeholder="请输入编码"></el-input>
          </el-form-item>
          <el-form-item label="名称" prop="name">
            <el-input v-model="info.name" placeholder="请输入名称"></el-input>
          </el-form-item>
          <el-form-item label="路径" prop="path">
            <el-input v-model="info.path" placeholder="请输入路径，如：/test"></el-input>
          </el-form-item>
          <el-form-item label="cron" prop="cron">
            <el-input v-model="info.cron" placeholder="请输入cron"></el-input>
          </el-form-item>
          <el-form-item label="负责人" prop="person">
            <el-input v-model="info.person" placeholder="请输入负责人"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="info.email" placeholder="请输入通知邮箱"></el-input>
          </el-form-item>
          <el-form-item label="重试" prop="retry">
            <el-input-number :precision="0" min="0" :step="1" v-model="info.retry"></el-input-number>
            <el-tag type="primary" style="margin-left:20px;">次</el-tag>
          </el-form-item>
          <el-form-item label="参数" prop="params">
            <el-input v-model="info.params" placeholder="请输入任务参数"></el-input>
          </el-form-item>
          <el-form-item label="说明" prop="jobDesc">
            <el-input type="textarea" v-model="info.jobDesc" placeholder="请输入任务说明"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
          <span class="dialog-footer">
            <el-button @click="visible.edit = false">取 消</el-button>
            <el-button type="primary" @click="save">确 定</el-button>
          </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      visible: {
        edit: false
      },
      page: {
        current: 1,
        size: 10,
        total: 0,
        orders: [
          { column: "create_time", asc: false }
        ],
        cond: {
          code: null,
          name: null,
        },
        records: []
      },
      result: {},
      info: {
        id: null,
        execId: null,
        execName: null,
        code: null,
        name: null,
        path: null,
        cron: "0 0/5 * * * ?",
        person: null,
        email: null,
        retry: 1,
        params: null,
        status: null,
        jobDesc: null,
      },
      rules: {
        execId: [
          { required: true, message: "必填" }
        ],
        code: [
          { required: true, message: "必填" }
        ],
        name: [
          { required: true, message: "必填" }
        ],
        path: [
          { required: true, message: "必填" }
        ],
        cron: [
          { required: true, message: "必填" }
        ],
        person: [
          { required: true, message: "必填" }
        ],
        email: [
          { required: true, message: "必填" }
        ],
        retry: [
          { required: true, message: "必填" }
        ]
      },
      executors: []
    };
  },
  mounted() {
    this.getExecutors();
    this.list();
  },
  methods: {
    // 分页查询
    getExecutors() {
      this.$http.post("/admin/sys/scheduler/executor/listAll", {}, res => {
        this.executors = res.data || [];
      }, false, true, false);
    },
    // 菜单事件
    operate(cmd, row) {
      if (cmd === "start") {
        this.$http.post(
          "/admin/sys/scheduler/job/changeStatus",
          {id: row.id, status: "RUNNING"},
          () => {
          this.list();
        }, true, true, true);
      } else if (cmd === "stop") {
        this.$http.post(
          "/admin/sys/scheduler/job/changeStatus",
          {id: row.id, status: "STOPPED"},
          () => {
            this.list();
          }, true, true, true);
      } else if (cmd === "runOnce") {
        this.$confirm("是否执行一次?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          this.$http.post(
            "/admin/sys/scheduler/job/runOnce",
            {id: row.id},
            () => {
            }, true, true, true);
        });
      }
    },
    // 分页查询
    list(first) {
      if (first) {
        this.page.current = 1;
      }
      this.$http.post("/admin/sys/scheduler/job/list", this.page, res => {
        this.result = res.data;
      }, false, true, false);
    },
    // 编辑数据,add为true表示新增
    edit(add, row) {
      this.getExecutors();
      this.visible.edit = true;
      this.$nextTick(() => {
        if (add) {
          this.$utils.resetObj(this.info, null);
          this.$refs["form"].resetFields();
        } else {
          this.$utils.resetObj(this.info, null);
          this.$utils.copyObj(row, this.info);
        }
      });
    },
    // 保存数据
    save() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.$http.post("/admin/sys/scheduler/job/save", this.info, () => {
            this.visible.edit = false;
            this.list();
          }, true, true, true, this.$refs["form-dialog"].dialogRef);
        }
      });
    },
    remove(row) {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.$http.post("/admin/sys/scheduler/job/remove", row, () => {
          this.list();
        }, true, true, true);
      });
    },
    // 当前页切换
    changePage(current) {
      this.page.current = current;
      this.list();
    },
  }
};
</script>

<style lang="scss" scoped>

.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
  font-size: smaller;
  padding: 10px;
}

.my-container {
  padding: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  text-align: left;

  .header {
    padding: 20px;
    border-bottom: 1px solid #eeeeee;
    text-align: left;
  }

  .form {
    padding: 20px 20px 0 20px;
    font-size: 14px;
    text-align: left;
  }

  .content {
    flex: 1;
    height: 0;
  }

  .footer {
    padding: 5px;
  }
}
</style>